<template>
  <t-navbar :title="title" :fixed="false" left-arrow
    @left-click="router.replace({ name: 'home' })" />
  <t-message theme="success" v-model="visible1"
    :offset="['10px', '16px']" :duration="5000"
    :content="message" />
  <t-dialog v-model:visible="isShowDialog1" title="举报"
    content="我们会进行核实，一旦发现问题将严肃处理，感谢您的反馈" cancel-btn="取消"
    confirm-btn="确认" @confirm="onConfirm1" @cancel="onCancel1">
  </t-dialog>
  <div class="about p-5">
    <t-image class="border-rounded-lg" fit="contain"
      position="center" :src="url"></t-image>
    <p class="mt-5 text-3xl font-bold">{{ title }}</p>
    <p class="mt-5 text-sm">发布时间:{{ time }}</p>
    <p class="mt-5 text-sm">人数:{{ people }}</p>
    <p class="mt-5 text-sm">联系邮箱:{{ mail }}</p>
  </div>
  <t-button class="m-2.5" size="large" theme="primary"
    @click="baoming()">我要报名!</t-button>
  <t-button class="m-2.5" size="large" theme="primary"
    @click="() => { isShowDialog1 = true }">举报!</t-button>
</template>
<script setup>
  import { useStore } from '@/store/loginState'
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'
  import { state } from '@/components/State'
  import dayjs from 'dayjs'
  const loginState = useStore()
  const router = useRouter()
  const message = ref('')
  const visible1 = ref(false)
  const title = state.item?.title ?? "房间详情"
  const url = state.item?.src ?? ""
  const time = dayjs().format('YYYY-MM-DD')
  const people = state.item?.people ?? ""
  const mail = state.item?.mail ?? ""

  const isShowDialog1 = ref(false)
  const onConfirm1 = () => {
    isShowDialog1.value = false
    visible1.value = true
    message.value = "举报成功"
    loginState.removeHomeIndex(mail)
  }
  const onCancel1 = () => {
    isShowDialog1.value = false
  }

  const baoming = () => {
    window.webkit.messageHandlers.myMessageHandler.postMessage({
      method: "myNativeMethod"
    })
    visible1.value = true
    message.value = '报名成功,请等待审核~'
  }
</script>
<style></style>
